<template>
  <div class="box">
    <div class="top">
      <div class="w1398">
        <div class="grid-content bg-purple-dark">
          <img src="../assets/image/logo2.png" @click="gotohome" alt />
          <!-- <form action="http://www.baidu.com/baidu" target="_blank">
            <input name="word" size="40" type="text" />
            <input value="百度搜索" type="submit" />
          </form>-->

          <div class="search">
            <i></i>
            <select name id v-model="val" @change="getValue($event)">
              <option value="baidu">百度</option>
              <option value="360">360</option>
              <option value="sougou">搜狗</option>
            </select>
            <form id="form" action="https://www.baidu.com/baidu" target="_blank" method="get">
              <input id="text" type="text" name="word" placeholder="中亿财经网" />
              <input type="submit" value />
            </form>
          </div>

          <!-- 手机菜单 -->
          <div class="top_m">
            <ul>
              <li
                v-for="(item,index) in list"
                :key="index"
                @click="twoNav(item.stid)"
              >{{item.navName}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="top1">
      <div class="w1398 nav">
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="twoNav(item.stid,index)"
            :class="index==selected?'selected':''"
          >
            {{item.navName}}
            <div class="border"></div>
          </li>
        </ul>
        <dl>
          <router-link :to="{ path: '/phone'}">
            <dd id="call_my">联系我们</dd>
          </router-link>
          <router-link :to="{ path: '/apply'}">
            <dd>申请收录</dd>
          </router-link>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import eventVue from "../script/eventVue";
export default {
  data() {
    return {
      val: "baidu",
      list: [],
      twoList: [],
      selected: 0
    };
  },
  created() {
    // console.log(this.GLOBAL.serverSrc);
    // 导航栏接口数据
    this.selected = sessionStorage.stid - 1 || 0;

    this.$http
      .get("https://" + this.GLOBAL.serverSrc + "/api/get_nav", {
        params: {}
      })
      .then(res => {
        console.log(res.data.data);
        this.list = res.data.data;
      });

    // axios
    //   .get("https://" + this.GLOBAL.serverSrc + "/api/get_nav")
    //   .then(function(res) {
    //     console.log(res.data.data);
    //     this.list = res.data.data;
    //   });
  },
  mounted() {},
  methods: {
    getValue(event) {
      console.log(event.target.value);
      // 调用360接口
      if (event.target.value.indexOf("360") != -1) {
        $("form").attr(
          "action",
          "https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome"
        );
        $("#text").attr("name", "q");
      }
      // 调用搜狗接口
      if (event.target.value.indexOf("sougou") != -1) {
        $("form").attr("action", "https://www.sogou.com/web");
        $("#text").attr("name", "query");
        $(".search i").css({
          "background-image": "url(./../assets/image/icon_baidu.png"
        });
      }
      // 调用百度接口
      if (event.target.value.indexOf("baidu") != -1) {
        $("form").attr("action", "https://www.baidu.com/baidu");
        $("#text").attr("name", "word");
      }
    },
    // 点击导航分类获取数据
    twoNav(stid, index) {
      console.log(stid);
      sessionStorage.stid = stid;
      this.selected = index;
      window.location.reload();
      // this.$router.push({
      //   path: "/"
      // });
      // this.$http
      //   .get("https://" + this.GLOBAL.serverSrc + "/api/findBySite", {
      //     params: { stid }
      //   })
      //   .then(res => {
      //     console.log(res.data.data[0].child);
      //     this.twoList = res.data.data[0].child;
      //     eventVue.$emit("data", this.twoList);
      //   });
      // this.$router.push({
      //   name: "home",
      //   params: { stid: stid }
      // });
    },
    gotohome() {
      this.$router.push({
        path: "/"
      });
    }
  }
};
</script>
<style scoped>
@media screen and (min-width: 1024px) {
  .w1398 {
    width: 1398px;
    margin: auto;
  }

  .top {
    background: rgba(48, 48, 48, 1);
    width: 100%;
  }
  .grid-content {
    background: rgba(48, 48, 48, 1);
    height: 100px;
    overflow: hidden;
  }
  img {
    margin-top: 21px;
    float: left;
    width: 228px;
  }
  .search {
    width: 665px;
    height: 52px;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    float: right;
    margin-top: 24px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .search i {
    display: inline-block;
    width: 15px;
    height: 15px;
    /* background-image: url(../assets/image/icon_360.jpg); */
    background-size: 100%;
  }
  .search select {
    /* width: 63px; */
    height: 25px;
    margin-top: 12px;
    /* margin-left: 20px; */
    border: none;
    outline: none;
  }
  .search form {
    display: inline-block;
    /* transform: translateY(-6px); */
  }
  .search form input:nth-child(1) {
    width: 524px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: none;
    outline: none;
    padding-left: 15px;
  }
  .search form input:nth-child(2) {
    width: 27px;
    height: 27px;
    background: #fff url(../assets/image/icon_sousuo.png) no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    transform: translateY(5px);
    outline: none;
    cursor: pointer;
  }

  .nav {
    overflow: hidden;
  }
  .nav ul {
    display: flex;
    height: 66px;
    background: rgba(255, 255, 255, 1);
    line-height: 66px;
    float: left;
    margin-left: -60px;
  }
  .nav ul li:hover {
    color: #bc8339;
  }
  .nav ul li {
    width: 158px;
    text-align: center;
    position: relative;
    cursor: pointer;
  }
  .nav ul li .border {
    width: 1px;
    height: 15px;
    background: rgba(187, 187, 187, 1);
    position: absolute;
    right: 0;
    top: 26px;
  }
  .nav ul li:nth-last-child(1) .border {
    display: none;
  }
  dl {
    float: right;
    display: flex;
    height: 66px;
    background: rgba(255, 255, 255, 1);
    line-height: 66px;
    margin-left: 308px;
  }
  dl dd {
    color: #bc8339;
  }
  #call_my {
    padding: 0 25px;
  }
  .top_m {
    display: none;
  }
  .selected {
    color: #bc8339;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  html {
    font-size: 62.5%;
    font-size: calc(100vw / 7.5);
    font-size: -webket-calc(100vw/7.5);
  }
  .top {
    background: #303030;
    width: 100%;
  }
  .grid-content {
    background: #303030;
    height: 1.84rem;
    overflow: hidden;
    width: 100%;
  }
  img {
    width: 2.59rem;
    margin-top: 0.32rem;
    float: left;
    margin-left: 0.22rem;
  }
  .search {
    width: 4.15rem;
    height: 0.59rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    float: right;
    margin-top: 0.21rem;
    margin-right: 0.27rem;
  }
  .search i {
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    /* background-image: url(../assets/image/icon_baidu.png) no-repeat; */
    background-size: 100%;
    display: none;
  }
  .search select {
    height: 0.35rem;
    margin-top: 0.11rem;
    border: none;
    outline: none;
    float: left;
    margin-left: 0.2rem;
  }
  .search form {
    /* display: inline-block; */
  }
  .search form input:nth-child(1) {
    width: 2.54rem;
    height: 0.58rem;
    background: rgba(255, 255, 255, 1);
    border: none;
    outline: none;
    float: left;
  }
  .search form input:nth-child(2) {
    width: 0.27rem;
    height: 0.27rem;
    background: #fff url(../assets/image/icon_sousuo.png) no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    transform: translateY(0.05rem);
    outline: none;
    cursor: pointer;
    float: left;
    margin-top: 0.1rem;
  }
  .nav {
    overflow: hidden;
  }
  .nav ul {
    display: flex;
    height: 0.66rem;
    background: rgba(255, 255, 255, 1);
    line-height: 0.66rem;
    float: left;
    font-size: 0.16rem;
  }
  .nav ul li:nth-child(odd) {
    width: 1.58rem;
    text-align: center;
  }
  dl {
    float: right;
    display: flex;
    height: 0.66rem;
    background: rgba(255, 255, 255, 1);
    line-height: 0.66rem;
    font-size: 0.16rem;
  }
  dl dd {
    color: rgba(238, 69, 69, 1);
  }
  dl dd:nth-child(1) {
    padding: 0 0.25rem;
  }
  .top1 {
    display: none;
  }
  .top_m {
    display: block;
  }
  .top_m ul {
    display: flex;
    height: 0.66rem;
    color: #fff;
    line-height: 0.66rem;
    float: left;
    font-size: 0.16rem;
    justify-content: space-around;
    width: 100%;
  }
  .top_m ul li {
    width: 1.25rem;
    text-align: center;
    margin-top: 0.2rem;
    font-size: 0.3rem;
  }
  /* 手机mine */
  .nav_m {
    display: block;
    height: 0.66rem;
    font-size: 0.16rem;
  }
}
</style>


